<meta charset="UTF-8">
  <div class="content-wrapper">
    <section class="content-header">
      <h1 style="text-align:center">
        	交易汇总
      </h1>
    </section>
    <section class="content" style='position: relative;'> 
         <div class="panel-body" style="padding-bottom:0px;">
						<div class="row searchdiv">
							
							<!--<div class="form-group col-lg-2 col-xs-6 space">
								<div class="input-group date">
								  <input type="text" class="form-control pull-right" id="datepicker">
								  <div class="input-group-addon">
									<i class="fa fa-calendar"></i>
								  </div>
								</div>
							</div>
							<div class="form-group col-lg-2 col-xs-6 space">
								<div class="input-group date">
								  <input type="text" class="form-control pull-right" id="datepicker2">
								  <div class="input-group-addon">
									<i class="fa fa-calendar"></i>
								  </div>
								</div>
							</div>-->
							<div class='col-md-3'>
							 	<input type="text" class="form-control pull-right" id="reservation" ng-model="searchDate" style='text-align: center;'>
							 </div>
                <div class="form-group col-lg-2 col-xs-6 space" style='display: inline-block;width: auto;vertical-align: middle;'>
									 <select class="form-control" ng-model="cardKind">
			                    <option>全部类型</option>
			                    <option>充值</option>
			                    <option>餐补</option>
			                    <option>加班餐补</option>
			            </select>
								</div>
							
								<div class="form-group col-lg-2 col-xs-6 space" style='display: inline-block;width: 160px;vertical-align: middle;position: relative;'>
										<input  class="form-control" type="text" placeholder="请选择操作员" ng-model="cardInfor" readonly ng-click="seleOperator($event)">
										<span style='position: absolute;top: 0px;right: 0px;padding: 6px 10px;z-index: 10;' ng-click="clearSelectOperator()">
											<img src="../imgs/del.png" style='width: 15px;'/>
										</span>
			     			 </div>
			     			 <button style='margin-right: 3%;' class="btn pull-right" ng-click="download('busColTable','交易汇总')"><i class="fa fa-cloud-download"></i>&nbsp;&nbsp;导出</button>
			   </div>
			   
			<!--表格-->
			<div class="box" >
            <div class="box-body">
              <div  class="dataTables_wrapper form-inline dt-bootstrap"><div class="row"><div class="col-sm-6"></div><div class="col-sm-6"></div></div><div class="row"><div class="col-sm-12">
              	<table id='busColTable' style='width: 100%; position: relative;overflow: auto;height:90%; display: block;background: #ffffff;' class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">
	                <thead style='display: inline-table;width: 100%;'>
		                <tr role="row">
		                	<th    style="width: 12%;">类型</th>
		                	<th  style="width: 8%;">现金</th>
		                	<th   style="width: 10%;">银行卡</th>
		                	<th  style="width: 12%;">在线支付</th>
		                	<th   style="width: 12%;">饭卡</th>
		                	<th   style="width: 9%;">小计</th>
		                </tr>
	                </thead>
	              <tbody style='display: inline-table;width: 100%;'>
			                <tr style='position: relative;width: 100%;display: inline-table;' ng-class="{even:!$even, odd:!$odd}" ng-repeat="busCo in busCollectInfors">
				                  <td style="width: 12%;">{{busCo.opt_type}}</td>
				                  <td style="width: 8%;" >{{busCo.cash}}</td>
				                  <td style="width: 10%;">{{busCo.bank_card}}</td>
				                  <td style="width: 12%;">{{busCo.online_payment}}</td>
				                  <td style="width: 12%;">{{busCo.meal_card}}</td>
								  				<td style="width: 9%;" >{{busCo.total}}</td>
			                </tr>
	                </tbody>
	                <tfoot>
	                </tfoot>
              </table>
              </div>
              </div>
              </div>
            </div>
      </div>
	</section>
</div>
<!-- 选择操作员modal -->
<div class="modal fade" id="selectOperator" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" style="text-align:center" >选择员工</h4>
      </div>
      
      
     <!--表格-->
			<div class="box" style='width: 94%;  display: inline-block;'>
            <div class="box-body">
              <div  class="dataTables_wrapper form-inline dt-bootstrap"><div class="row"><div class="col-sm-6"></div><div class="col-sm-6"></div></div><div class="row"><div class="col-sm-12">
              	<table style='width: 100%; position: relative;overflow: scroll; display: block;background: #ffffff;height:440px' 
              		class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info"><!--min-height: 300px; max-height: 500px;-->
                <thead style='display: inline-table;width: 100%;'>
	                <tr role="row">
	                	<th  style="width: 8%;" >用户名</th>
	                	<th  style="width: 10%;">姓名</th>
	                	<th  style="width: 12%;">手机号</th>
	                </tr>
                </thead>
              <tbody id='selectOperator' style='display: inline-table;width: 100%;' >
		                <tr ng-click="operatorSelected($event)" style='position: relative;width: 100%;display: inline-table;' ng-class="{even:!$even, odd:!$odd}" ng-repeat="item in operators">
			                  <td style="width: 8%;" >{{item.orderName}}</td> 
			                  <td style="width: 10%;">{{item.userName}}</td>
			                  <td style="width: 12%;">{{item.mobile}}</td>
		                </tr>
                </tbody>
                <tfoot>
                </tfoot>
              </table>
              </div>
              </div>
              </div>
            </div>
      </div>
      
      
      
      
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-lg pull-left" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-success btn-lg" ng-click="trueSelectOperator()">确定</button>
      </div>
    </div>
  </div>
</div>

<style>
	.space{
		padding-left:2px;
		padding-right:2px;
	}
	.box{
		border-top:1px solid #d2d6de;
	}
	.pagination{
		margin:0;
	}
	.odd{background-color: #f9f9f9 !important;}
	.even{background-color: transparent !important;}
	.btn{    padding: 10px 12px;}
</style>
<script>
					$(document).ready(function() {
							
//							$('#table_example').hide();
  							//$('#example').dataTable();
					} );
					
				
	
</script>